<template>
	<view class="container">

		<view class="box">
			<u-checkbox-group v-model="checkboxValue1" placement="column">
				<view class="address-list" id="address-list">
					<view class="a-address" v-for="(item,index) in listData" :key="index">
						<blockquote>
							<u-checkbox shape="circle" customStyle="margin: 0 8rpx 0 24rpx;" label=" " :name="item.id"
								active-color="#ffaa00">
							</u-checkbox>
						</blockquote>
						<view class="left-text">
							<view class="name-tel">
								<text v-if="item.isDefault" class="active">默认</text>
								<text>{{item.location}}</text>
							</view>
							<view class="details-address">{{item.detailedAddress}}</view>
							<view class="address-box">
								{{item.receiver}} {{returntel(item.phone)}}
							</view>
						</view>
						<view class="right-edit">
							<u-icon name="edit-pen" size="40rpx" @tap="editAddess(item.id)"></u-icon>
						</view>
					</view>
				</view>
			</u-checkbox-group>
		</view>

		<view class="btn" id="btnId">
			<view class="bottom-box">
				<view class="add-btn" @tap="addAddess">新增收货地址</view>
				<view class="btn-delete" @tap="handleDelete" v-if="checkboxValue1.length">删 除</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		addressList,
		addressDelete
	} from "@/http";

	export default {
		data() {
			return {
				edit: 1,
				checkboxValue1: [],
				listData: [],
				userInfo: {},
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.getList();
		},
		methods: {
			async getList() {
				let res = await addressList({
					userPhone: this.userInfo.phone
				});
				this.listData = res.data.rows
			},
			async handleDelete() {
				if (!this.checkboxValue1.length) return;
				let res = await addressDelete(this.checkboxValue1.toString());
				this.checkboxValue1 = [];
				this.getList();
			},
			editAddess(id) {
				uni.navigateTo({
					url: '/myPages/address/add?status=' + id
				})
			},
			addAddess() {
				console.log("tap add new Address");
				uni.navigateTo({
					url: '/myPages/address/add'
				})
			},
			returntel(tel) {
				if (null != tel && tel != undefined) {
					return tel.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				} else {
					return "";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		&::after {
			position: fixed;
			content: "";
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: -999;
			background-color: #F7F7F7;
		}
		.box {
			padding: 0 32rpx;
		}
		padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
	}

	.address-list {
		width: 100%;
	}

	.address-list .a-address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		margin-top: 24rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.a-address .left-text {
		flex: 1;
		box-sizing: border-box;
	}

	.a-address .left-text .name-tel {
		margin-bottom: 12rpx;
		display: inline-block;
		font-size: 24rpx;
		color: #878787;
	}

	.name-tel .active {
		background-color: #FF3B44;
		color: #FFFFFF;
		border-radius: 8rpx;
		padding: 1rpx 6rpx;
		font-size: 20rpx;
		margin-right: 4rpx;
	}

	.a-address .left-text .details-address {
		font-size: 30rpx;
		margin-bottom: 12rpx;
		color: #1F1F1F;
	}

	.a-address .left-text .address-box {
		font-size: 28rpx;
		color: #878787;
	}

	.a-address .right-edit {
		width: 80rpx;
		height: 100%;
		box-sizing: border-box;
		background-size: 35rpx auto;
	}

	.a-address .big-name {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50%;
		background: -webkit-linear-gradient(left, #ffffcc, #ffcccc);
		margin: 0 24rpx;
		color: #cc6633;
		font-size: 28rpx;
		font-weight: bold;
	}


	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		background-color: #FFFFFF;
		box-shadow: 0px -10px 10px 0px rgba(0, 0, 0, 0.05);

		.bottom-box {
			.add-btn,
			.btn-delete {
				background: #FD8F19;
				color: #fff;
				text-align: center;
				border-radius: 40rpx;
				margin: 0 32rpx;
				height: 100rpx;
				margin-top: 18rpx;
				line-height: 100rpx;
				font-size: 28rpx;
			}
			.btn-delete {
				background-color: red;
				color: #FFFFFF;
			}
		}
	}
</style>
